<template>
  <view class="container">
    <swiper class="swiper" :indicator-dots="true" :autoplay="false" indicator-active-color="#8A2BE2">
      <!-- 第一页 -->
      <swiper-item>
        <view class="guide-item">
          <image src="http://114.55.56.174:19000/shzy/guide4.jpg" mode="aspectFit"></image>
          <!-- <view class="title">带你定义世界每个角落</view>
          <view class="desc">APP 5.0 全新体验</view> -->
          <!-- <button class="start-btn" @tap="startExperience">立即开启</button> -->
        </view>
      </swiper-item>
      
      <!-- 第二页 -->
      <swiper-item>
        <view class="guide-item">
          <image src="http://114.55.56.174:19000/shzy/guide2.jpg" mode="aspectFit"></image>
          <view class="title">说走就走的旅行</view>
          <view class="desc">探索世界的每一个角落</view>
        </view>
      </swiper-item>
      
      <!-- 第三页 -->
      <swiper-item>
        <view class="guide-item">
          <image src="http://114.55.56.174:19000/shzy/guide3.jpg" mode="aspectFit"></image>
          <view class="title">准备好旅行了吗</view>
          <view class="desc">选择你的好的目的地，在这个假期里，享受最棒的旅行</view>
          <button class="start-btn" @tap="startExperience">立即体验</button>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onLoad() {
    console.log('Guide page loaded')
    // 检查是否首次打开应用
    const isFirstOpen = !uni.getStorageSync('notFirstOpen')
    console.log('Is first open:', isFirstOpen)
    if (!isFirstOpen) {
      // 如果不是首次打开，直接跳转到主页
      this.startExperience()
    }
  },
  methods: {
    startExperience() {
      console.log('Starting experience')
      // 标记不是首次打开
      uni.setStorageSync('notFirstOpen', true)
      // 跳转到主页
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: #fff;
}

.swiper {
  width: 100%;
  height: 100%;
}

.guide-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 60rpx;
  
  image {
    width: 600rpx;
    height: 600rpx;
    margin-bottom: 60rpx;
  }
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .desc {
    font-size: 32rpx;
    color: #666;
    text-align: center;
    padding: 0 40rpx;
  }
  
  .start-btn {
    width: 400rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient(to right, #8A2BE2, #9370DB);
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin-top: 80rpx;
    box-shadow: 0 10rpx 20rpx rgba(138, 43, 226, 0.2);
  }
}
</style> 